<div class="sub-main-container">
    <div class="search-wrap">
        <button nz-button nzType="primary" class="add-btn" (click)="directToSketchMap()">
            切换至展示图
        </button>
        <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
            <nz-form-item>
                <nz-form-label>名称</nz-form-label>
                <nz-form-control>
                    <input formControlName="watergateCode" nz-input placeholder="闸门名称"/>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>管理单位</nz-form-label>
                <nz-form-control>
                    <nz-select formControlName="sectionId" [nzAllowClear]="false" nzPlaceHolder="管理所"
                               style="width: 170px;" (ngModelChange)="getSectionList()">
                        <nz-option nzLabel="全部" nzValue="1"></nz-option>
                        <nz-option nzLabel="跃进渠一所" nzValue="168"></nz-option>
                        <nz-option nzLabel="跃进渠二所" nzValue="169"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>所段</nz-form-label>
                <nz-form-control>
                    <nz-select formControlName="section2Id" nzAllowClear nzPlaceHolder="所段"
                               style="width: 170px;">
                        <nz-option *ngFor="let option of sectionList" [nzLabel]='option.manageName'
                                   [nzValue]="option.id"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control>
                    <button nz-button nzType="primary" (click)="queryInfo(true)"><i nz-icon nzType="search"></i>查询
                    </button>
                </nz-form-control>
            </nz-form-item>
        </form>
    </div>

    <div class="main-wrap">
        <nz-table #dataTable
                  class="main-table"
                  [nzData]="tableData"
                  [nzTotal]="total"
                  [(nzPageIndex)]="pageNum"
                  [nzPageSize]="pageSize"
                  [nzFrontPagination]="false"
                  [nzLoading]="loading"
                  nzBordered
                  (nzPageIndexChange)="queryInfo()"
                  nzSize="middle">
            <thead>
            <tr>
                <th>连接状态</th>
                <th>管理所</th>
                <th>管理段</th>
                <th>直开口</th>
                <th>桩号</th>
                <th>设备类型</th>
                <th>闸门开度（mm）</th>
                <th>闸前水位（m）</th>
                <th>闸后水位（m）</th>
                <th>瞬时流量（m³/s）</th>
                <th>累计水量（m³）</th>
                <th>电池电压（V）</th>
                <th>运动状态</th>
                <th>远程/本地</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of dataTable.data">
                <td [ngClass]="data.onlinestatus === 'on' ? 'green':'red'">{{ data.onlinestatus === 'on' ? '在线' : '不在线' }}</td>
                <td>{{data.stationName}}</td>
                <td>{{data.a}}</td>
                <td>{{data.watergateCode}}</td>
                <td>{{data.coordinate}}</td>
                <td>{{ data.structureType }}</td>
                <td>{{data.degree}}</td>
                <td>{{data.beforewaterlevel}}</td>
                <td>{{data.afterwaterlevel}}</td>
                <td>{{data.flow}}</td>
                <td>{{data.totalFlux}}</td>
                <td>{{data.vlotage}}</td>
                <td>{{data.runstatus}}</td>
                <td>{{ data.strobeCtrlStatus === '1' ? '就地' : '远程' }}</td>
                <td>
                    <a (click)="openGateDetailModal(data.strobeCode)">详情</a>
                </td>
            </tr>
            </tbody>
        </nz-table>
    </div>
</div>
